<template>
  <div class="settings-container">
    <div class="page-container">
      <div class="content-wrapper">
        <div class="header-section">
          <h1 class="page-title">设置</h1>
          <p class="page-subtitle">个性化您的使用体验</p>
        </div>
        
        <div class="settings-content">
          <el-row :gutter="30">
            <el-col :span="16">
              <div class="settings-panels">
                <!-- 基本设置 -->
                <el-card class="settings-card" shadow="hover">
                  <template #header>
                    <div class="card-header">
                      <el-icon><Setting /></el-icon>
                      <span>基本设置</span>
                    </div>
                  </template>
                  
                  <el-form :model="basicSettings" label-width="120px">
                    <el-form-item label="语言设置">
                      <el-select v-model="basicSettings.language" style="width: 200px">
                        <el-option label="简体中文" value="zh-CN"></el-option>
                        <el-option label="English" value="en-US"></el-option>
                      </el-select>
                    </el-form-item>
                    
                    <el-form-item label="主题模式">
                      <el-radio-group v-model="basicSettings.theme">
                        <el-radio value="light">浅色模式</el-radio>
                        <el-radio value="dark">深色模式</el-radio>
                        <el-radio value="auto">跟随系统</el-radio>
                      </el-radio-group>
                    </el-form-item>
                    
                    <el-form-item label="自动保存">
                      <el-switch
                        v-model="basicSettings.autoSave"
                        active-text="开启"
                        inactive-text="关闭"
                      />
                    </el-form-item>
                  </el-form>
                </el-card>
                
                <!-- 语音设置 -->
                <el-card class="settings-card" shadow="hover">
                  <template #header>
                    <div class="card-header">
                      <el-icon><Microphone /></el-icon>
                      <span>语音设置</span>
                    </div>
                  </template>
                  
                  <el-form :model="voiceSettings" label-width="120px">
                    <el-form-item label="语音合成">
                      <el-switch
                        v-model="voiceSettings.enabled"
                        active-text="开启"
                        inactive-text="关闭"
                      />
                    </el-form-item>
                    
                    <el-form-item label="语音速度">
                      <el-slider
                        v-model="voiceSettings.speed"
                        :min="0.5"
                        :max="2"
                        :step="0.1"
                        show-input
                        style="width: 300px"
                      />
                    </el-form-item>
                    
                    <el-form-item label="音量">
                      <el-slider
                        v-model="voiceSettings.volume"
                        :min="0"
                        :max="100"
                        show-input
                        style="width: 300px"
                      />
                    </el-form-item>
                    
                    <el-form-item label="语音类型">
                      <el-select v-model="voiceSettings.voiceType" style="width: 200px">
                        <el-option label="标准女声" value="female-standard"></el-option>
                        <el-option label="标准男声" value="male-standard"></el-option>
                        <el-option label="温柔女声" value="female-gentle"></el-option>
                        <el-option label="磁性男声" value="male-magnetic"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>
                </el-card>
                
                <!-- 聊天设置 -->
                <el-card class="settings-card" shadow="hover">
                  <template #header>
                    <div class="card-header">
                      <el-icon><ChatDotRound /></el-icon>
                      <span>聊天设置</span>
                    </div>
                  </template>
                  
                  <el-form :model="chatSettings" label-width="120px">
                    <el-form-item label="消息历史">
                      <el-input-number
                        v-model="chatSettings.historyLimit"
                        :min="10"
                        :max="1000"
                        :step="10"
                      />
                      <span class="form-helper">条消息</span>
                    </el-form-item>
                    
                    <el-form-item label="自动回复">
                      <el-switch
                        v-model="chatSettings.autoReply"
                        active-text="开启"
                        inactive-text="关闭"
                      />
                    </el-form-item>
                    
                    <el-form-item label="消息提示音">
                      <el-switch
                        v-model="chatSettings.soundNotification"
                        active-text="开启"
                        inactive-text="关闭"
                      />
                    </el-form-item>
                    
                    <el-form-item label="回复延迟">
                      <el-slider
                        v-model="chatSettings.replyDelay"
                        :min="0"
                        :max="5"
                        :step="0.5"
                        show-input
                        style="width: 300px"
                      />
                      <span class="form-helper">秒</span>
                    </el-form-item>
                  </el-form>
                </el-card>
              </div>
            </el-col>
            
            <el-col :span="8">
              <div class="settings-sidebar">
                <!-- 预览区域 -->
                <el-card class="preview-card" shadow="hover">
                  <template #header>
                    <div class="card-header">
                      <el-icon><View /></el-icon>
                      <span>预览</span>
                    </div>
                  </template>
                  
                  <div class="preview-content">
                    <div class="theme-preview" :class="basicSettings.theme">
                      <div class="preview-message bot">
                        <el-avatar size="small">AI</el-avatar>
                        <div class="message-bubble">
                          你好！这是预览消息。
                        </div>
                      </div>
                      <div class="preview-message user">
                        <div class="message-bubble">
                          设置看起来不错！
                        </div>
                        <el-avatar size="small">我</el-avatar>
                      </div>
                    </div>
                  </div>
                </el-card>
                
                <!-- 快速操作 -->
                <el-card class="actions-card" shadow="hover">
                  <template #header>
                    <div class="card-header">
                      <el-icon><Operation /></el-icon>
                      <span>快速操作</span>
                    </div>
                  </template>
                  
                  <div class="quick-actions">
                    <el-button type="primary" @click="saveSettings" :loading="saving">
                      <el-icon><Check /></el-icon>
                      保存设置
                    </el-button>
                    <el-button @click="resetSettings">
                      <el-icon><RefreshRight /></el-icon>
                      重置默认
                    </el-button>
                    <el-button @click="exportSettings">
                      <el-icon><Download /></el-icon>
                      导出配置
                    </el-button>
                  </div>
                </el-card>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Setting,
  Microphone,
  ChatDotRound,
  View,
  Operation,
  Check,
  RefreshRight,
  Download
} from '@element-plus/icons-vue'

// 响应式数据
const saving = ref(false)

const basicSettings = reactive({
  language: 'zh-CN',
  theme: 'light',
  autoSave: true
})

const voiceSettings = reactive({
  enabled: true,
  speed: 1.0,
  volume: 80,
  voiceType: 'female-standard'
})

const chatSettings = reactive({
  historyLimit: 100,
  autoReply: true,
  soundNotification: true,
  replyDelay: 1.0
})

// 方法
const saveSettings = async () => {
  saving.value = true
  
  try {
    // 模拟保存设置
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    ElMessage.success('设置保存成功！')
  } catch (error) {
    ElMessage.error('设置保存失败，请重试')
  } finally {
    saving.value = false
  }
}

const resetSettings = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要重置所有设置为默认值吗？',
      '重置设置',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    // 重置为默认值
    Object.assign(basicSettings, {
      language: 'zh-CN',
      theme: 'light',
      autoSave: true
    })
    
    Object.assign(voiceSettings, {
      enabled: true,
      speed: 1.0,
      volume: 80,
      voiceType: 'female-standard'
    })
    
    Object.assign(chatSettings, {
      historyLimit: 100,
      autoReply: true,
      soundNotification: true,
      replyDelay: 1.0
    })
    
    ElMessage.success('设置已重置为默认值')
  } catch {
    // 用户取消
  }
}

const exportSettings = () => {
  const settings = {
    basic: basicSettings,
    voice: voiceSettings,
    chat: chatSettings
  }
  
  const dataStr = JSON.stringify(settings, null, 2)
  const dataBlob = new Blob([dataStr], { type: 'application/json' })
  
  const link = document.createElement('a')
  link.href = URL.createObjectURL(dataBlob)
  link.download = 'echo-role-settings.json'
  link.click()
  
  ElMessage.success('设置配置已导出')
}
</script>

<style scoped>
.settings-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px 0;
}

.header-section {
  text-align: center;
  margin-bottom: 40px;
}

.page-title {
  font-size: 2.5rem;
  color: #303133;
  margin-bottom: 10px;
  font-weight: 600;
}

.page-subtitle {
  font-size: 1.1rem;
  color: #606266;
  margin-bottom: 0;
}

.settings-panels {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.settings-card {
  width: 100%;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #303133;
}

.form-helper {
  margin-left: 10px;
  color: #909399;
  font-size: 0.9rem;
}

.settings-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.preview-content {
  padding: 0;
}

.theme-preview {
  padding: 15px;
  border-radius: 8px;
  background: #f8f9fa;
  transition: all 0.3s;
}

.theme-preview.dark {
  background: #2c3e50;
  color: white;
}

.preview-message {
  display: flex;
  align-items: flex-end;
  margin-bottom: 12px;
  gap: 8px;
}

.preview-message.user {
  justify-content: flex-end;
  flex-direction: row-reverse;
}

.message-bubble {
  padding: 8px 12px;
  border-radius: 12px;
  background: white;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  max-width: 200px;
}

.preview-message.user .message-bubble {
  background: #409eff;
  color: white;
}

.theme-preview.dark .message-bubble {
  background: #34495e;
  color: white;
}

.theme-preview.dark .preview-message.user .message-bubble {
  background: #409eff;
}

.quick-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quick-actions .el-button {
  justify-content: flex-start;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .settings-content .el-col {
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .page-title {
    font-size: 2rem;
  }
  
  .quick-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  .quick-actions .el-button {
    flex: 1;
    min-width: 120px;
  }
}
</style> 